<template>
  <a-card :bordered="false" class="br-10">
    <div class="table-page-search">
      <a-form>
        <a-form-item label="唯一键">
          <a-input placeholder="请输入" v-model="queryParam.menuKey" />
        </a-form-item>
        <a-form-item label="权限名称">
          <a-input placeholder="请输入" v-model="queryParam.menuName" />
        </a-form-item>
        <a-form-item label="状态">
          <a-select placeholder="请选择" v-model="queryParam.visible" allowClear>
            <a-select-option
              v-for="dict in Dict.getLocal('showTextDict')"
              :key="dict.dictValue"
              :value="dict.dictValue"
            >
              {{ dict.dictLabel }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <span class="search-submitButtons">
          <a-button type="primary" @click="this.fetch">查询</a-button>
          <a-button @click="() => (queryParam = { visible: undefined })">重置</a-button>
        </span>
      </a-form>
    </div>
    <div class="table-operator">
      <a-button v-has="'system:permission:add'" type="primary" @click="$refs.modal.add()">新建</a-button>
    </div>
    <a-table
      ref="table"
      rowKey="menuId"
      :pagination="pagination"
      :loading="loading"
      :columns="columns"
      :dataSource="data"
    >
      <span slot="menuType" slot-scope="text">
        {{ text | menuTypeFilter }}
      </span>

      <span slot="visible" slot-scope="text">
        <DictTag :options="Dict.getLocal('showTextDict')" :value="text" />
      </span>

      <span slot="sysType" slot-scope="text, record">{{ record.sysType.sysDesc }}</span>
      <span slot="action" slot-scope="text, record">
        <a-button v-has="'system:permission:add'" type="primary" ghost size="small" class="_mr-5" @click="handleAdd(record.menuId + '')">
          新增
        </a-button>
        <a-button v-has="'system:permission:edit'" type="primary" ghost size="small" class="_mr-5" @click="handleEdit(record)">
          编辑
        </a-button>
        <a-button v-has="'system:permission:remove'" type="primary" ghost size="small" class="_mr-5" @click="delById(record.menuId)">
          删除
        </a-button>
      </span>
    </a-table>

    <permission-modal ref="modal" @ok="handleOk" />
  </a-card>
</template>

<script>
import { Table as T } from 'ant-design-vue'
import { getPermissions, delPerm } from '@/api/system/system'
import PermissionModal from './modules/PermissionModal.vue'
import { treeData } from '@/utils/treeutil'
import DictTag from '@/components/DictTag'

export default {
  name: 'TableList',
  components: {
    T,
    PermissionModal,
    DictTag
  },
  data() {
    return {
      visible: false,
      form: null,
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: { visible: undefined },

      // 表头
      columns: [
        {
          title: '权限名称',
          dataIndex: 'menuName',
          width: '250px',
          ellipsis: true,
        },
        {
          title: '路由唯一键',
          dataIndex: 'menuKey',
          width: '200px',
        },
        {
          title: '组件',
          dataIndex: 'component',
          width: '200px',
        },
        {
          title: '排序',
          dataIndex: 'orderNum',
          width: '100px',
        },
        {
          title: '按钮类型',
          dataIndex: 'menuType',
          scopedSlots: { customRender: 'menuType' },
          width: '100px',
        },
        {
          title: '应用范围',
          dataIndex: 'sysType',
          scopedSlots: { customRender: 'sysType' },
          width: '150px',
        },
        {
          title: '链接',
          dataIndex: 'path',
          width: '150px',
        },
        {
          title: '重定向',
          dataIndex: 'redirect',
          width: '150px',
        },
        {
          title: '权限标识',
          dataIndex: 'perms',
          width: '200px',
        },
        {
          title: '状态',
          dataIndex: 'visible',
          scopedSlots: { customRender: 'visible' },
          width: '100px',
        },
        {
          title: '操作',
          width: '195px',
          dataIndex: 'action',
          fixed: 'right',
          scopedSlots: { customRender: 'action' },
        },
      ],
      data: [],
      pagination: false,
      loading: false,
    }
  },
  filters: {
    menuTypeFilter(type) {
      const menuMap = {
        M: '目录',
        F: '按钮',
        C: '菜单',
      }
      return menuMap[type]
    },
  },
  created() {
    this.fetch()
  },
  methods: {
    handleAdd(parentId) {
      this.$refs.modal.add(parentId)
    },
    handleEdit(record) {
      this.$refs.modal.edit(record)
    },
    handleOk() {
      // this.$refs.table.refresh()
      this.fetch()
      console.log('handleSaveOk')
    },
    delById(id) {
      var _this = this
      this.$confirm({
        title: '权限删除?',
        content: '是否确定删除该权限?',
        onOk() {
          delPerm(id).then((res) => {
            if (res.code === 0) {
              _this.$message.success(`删除成功`)
              _this.handleOk()
            } else {
              _this.$message.error(res.msg)
            }
          })
        },
        onCancel() {},
      })
    },
    fetch() {
      this.loading = true
      getPermissions(Object.assign(this.queryParam)).then((res) => {
        this.data = treeData(res.rows, 'menuId')
        this.loading = false
      })
    },
  }
}
</script>
